<template>
  <view class="bottom-button fixed-bottom self-bottom flex">
    <view
      class="cancel flex-center"
      @click="emit('cancel')"
      v-if="showCancelButton"
    >
      取消
    </view>
    <view
      class="confirm flex-center"
      @click="emit('confirm')"
      v-if="showConfirmButton"
    >
      确定
    </view>
  </view>
</template>

<script lang="ts" setup>
const props = defineProps({
  showCancelButton: {
    type: Boolean,
    default: true
  },
  showConfirmButton: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits<{
  (event: 'confirm'): void
  (event: 'cancel'): void
}>()
</script>

<style lang="scss" scoped>
.bottom-button {
  height: 100rpx;
  background-color: #fff;
}
.cancel {
  box-sizing: border-box;
  margin: 10rpx 0 10rpx 264rpx;
  width: 224rpx;
  height: 80rpx;
  background: #ffffff;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 2rpx solid #dee0e0;
  color: #999999;
  font-size: 36rpx;
}
.confirm {
  box-sizing: border-box;
  margin: 10rpx 0 10rpx 14rpx;
  width: 224rpx;
  height: 80rpx;
  color: #fff;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  background-color: #409eff;
  font-size: 36rpx;
}
</style>
